<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>输入提示后查询</title>
		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body onload="getFromAndTo();">
		<div id="container">

		</div>
		<div id="myPageTop">

			<div id="panel"></div>

		</div>

		<script type="text/javascript">
			window._AMapSecurityConfig = {
				securityJsCode: '262a704c77303ba513bccc1712ed9cdf'
			}
		</script>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="/utils/request.js"></script>
		<script src="https://webapi.amap.com/maps?v=2.0&key=7471ced96c6738c21aa5efe108671b77&plugin=AMap.PolygonEditor">
		</script>

		<script src="https://webapi.amap.com/maps?v=1.4.15&key=7471ced96c6738c21aa5efe108671b77&plugin=Map3D"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7471ced96c6738c21aa5efe108671b77">
		</script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=7471ced96c6738c21aa5efe108671b77">
		</script>
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=7471ced96c6738c21aa5efe108671b77&plugin=AMap.Driving"></script>
		<script type="text/javascript">
			//地图加载
			var map = new AMap.Map("container", {
				resizeEnable: true,
				center: [116.397428, 39.90923], //地图中心点
				zoom: 13, //地图显示的缩放级别


			});

			function getUrlParams() {
				const searchParams = new URLSearchParams(window.location.search);
				const params = {};
				for (let param of searchParams.entries()) {
					params[param[0]] = param[1];
				}
				console.log("params" + params)
				return params;
			}

			unOrder = () => {


				var params = getUrlParams();

				var param = decodeURIComponent(params);
				var order = JSON.parse(params.driver);
				var token = params.token;
				console.log(token)
				console.log(order.orderId);
				$.ajax({
					url: '/api/order/order/unorder/' + order.orderId,
					type: 'get',
					headers: {
						'Content-Type': 'application/json',
						"Authorization": "Bearer " + token,
					}, //设置请求头
					dataType: 'json',

					success: function(data) {
						console.log(data.data)
						if (data.code == 200) {
							alert(data.msg)
						} else {
							console.log(data.msg)
							//下完单后刷新页面

						}
					},
					error: function(obj, msg, e) { //异常
						alert("网络异常请稍后再试")
						//下完单后刷新页面
					}
				});

			}

			getFromAndTo = () => {


				var params = getUrlParams();
				console.log(params.order);
				var token = params.token;
				console.log(token)
				var param = decodeURIComponent(params);

				var order = JSON.parse(params.order);

				var startPlace = order.startPlace;
				console.log(startPlace)
				var endPlace = order.endPlace;
				console.log(endPlace)
				var driving = new AMap.Driving({
					map: map,
					// panel: "panel"
				});
				// 根据起终点名称规划驾车导航路线
				driving.search([{
						keyword: startPlace,
						city: '北京'
					},
					{
						keyword: endPlace,
						city: '北京'
					}
				], function(status, result) {
					// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
					if (status === 'complete') {
						console.log(result)
						orderKm = result.routes[0].distance;
						let luxian = parseRouteToPath(result.routes[0])
						AMap.plugin('AMap.MoveAnimation', function() {

							let marker = new AMap.Marker({
								map: map,
								position: luxian[0],
								icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
								offset: new AMap.Pixel(-13, -26),
							});

							// 绘制轨迹
							var polyline = new AMap.Polyline({
								map: map,
								path: luxian,
								showDir: true,
								strokeColor: "#28F", //线颜色
								// strokeOpacity: 1,     //线透明度
								strokeWeight: 6, //线宽
								// strokeStyle: "solid"  //线样式
							});

							var passedPolyline = new AMap.Polyline({
								map: map,
								strokeColor: "#AF5", //线颜色
								strokeWeight: 6, //线宽
							});


							marker.on('moving', function(e) {
								passedPolyline.setPath(e.passedPath);
								// map.setCenter(e.target.getPosition(), true)
							});
							map.setFitView();
							marker.moveAlong(luxian, {
								// 每一段的时长
								duration: 500, //可根据实际采集时间间隔设置
								// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
								autoRotation: true,
							});
						});
						console.log(orderKm)
					} else {
						console.log('获取驾车数据失败：' + result)
						console.log(result)
					}
				});

			}

			AMap.plugin('AMap.Geolocation', function() {
				var geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：5s
					buttonPosition: 'RB', //定位按钮的停靠位置
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition(function(status, result) {
					if (status == 'complete') {
						onComplete(result)
					} else {
						onError(result)
					}
				});
			});



			//解析定位结果
			function onComplete(data) {
				let jkl = window.location.search + "";
				let token = jkl.substring(1);
				var str = [];
				str.push('定位结果：' + data.position);
				console.log(data.position.lat);
				var LocationData = {
					longitude: data.position.lng,
					latitude: data.position.lat
				}

				str.push('定位类别：' + data.location_type);
				if (data.accuracy) {
					str.push('精度：' + data.accuracy + ' 米');
				} //如为IP精确定位结果则没有精度信息
				str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
			}

			var markers = [];

			// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
			markers.forEach(function(marker) {
				new AMap.Marker({
					map: map,
					icon: marker.icon,
					position: [marker.position[0], marker.position[1]],
					offset: new AMap.Pixel(-13, -30)
				});
			});

			var center = map.getCenter();
			var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();





			//获取起点和终点之间路线的坐标点
			function parseRouteToPath(route) {
				var path = []

				for (var i = 0, l = route.steps.length; i < l; i++) {
					var step = route.steps[i]

					for (var j = 0, n = step.path.length; j < n; j++) {
						path.push([step.path[j].lng, step.path[j].lat])
					}
				}

				return path
			}
		</script>
	</body>
</html>